<template>
    <AllHeader :transparency="true"></AllHeader>
    <div class="home-container">
        <!-- 轮播图页面 -->
        <div class="home-container_banner">
            <el-carousel height="100vh" @change="change" :interval="3000" :pause-on-hover="false">
                <el-carousel-item v-for=" item in bannerList" :key="item" style="overflow: hidden">
                    <div class="container-pic" :style="{ backgroundImage: `url(${getImage(item)})` }"></div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="home-container_news">
            <div class="container-news_main" ref="news">
                <div class="news-left hidden">
                    <div class="news-left_header">
                        <div class="left_header-introduce">
                            <p>资讯</p>
                            <p style="writing-mode: vertical-rl;line-height: 36px;">
                                更多资讯</p>
                        </div>
                        <ul class="left_header-newsList">
                            <li>
                                <span>哈哈哈哈，真是一条大新闻</span>
                                <span>2024/7/11</span>
                            </li>
                            <li>
                                <span>哈哈哈哈，真是一条大新闻</span>
                                <span>2024/7/11</span>
                            </li>
                            <li>
                                <span>哈哈哈哈，真是一条大新闻</span>
                                <span>2024/7/11</span>
                            </li>
                            <li>
                                <span>哈哈哈哈，真是一条大新闻</span>
                                <span>2024/7/11</span>
                            </li>
                            <li>
                                <span>哈哈哈哈，真是一条大新闻</span>
                                <span>2024/7/11</span>
                            </li>
                            <li>
                                <span>哈哈哈哈，真是一条大新闻</span>
                                <span>2024/7/11</span>
                            </li>
                        </ul>
                    </div>
                    <div class="news-left_footer">
                        <div class="footer-text">
                            <h3>视觉志</h3>
                            <div class="footer-text_content">
                                <h3>橙黄陶乳钉纹幚</h3>
                                <p>长流高颈。身形似兽，三袋足支撑器身，颈身间由一绳纹鋬相连。乳钉纹遍布器表并在腹部饰有凸弦纹及盲鼻。</p>
                            </div>
                        </div>
                        <div class="footer-img">
                            我是一张图片哈哈哈哈
                        </div>
                    </div>
                </div>
                <div class="news-middle hidden">
                    <div class="middle-title">
                        <img src="../../image/s5f81808be2625.png" alt="">
                        <div class="title-introduce">
                            <h2>二十四节气</h2>
                            <p>小暑</p>
                        </div>
                    </div>
                    <div class="middle-rule">
                        <h3>开放时间</h3>
                        <p class="clock">9:00 - 19:00</p>
                        <div class="rule-time">
                            <p>周二至周日可以进来玩</p>
                            <p>周二至周日可以进来玩</p>
                        </div>
                        <div>
                            <ul class="rule-phone">
                                <li>
                                    <i>图</i>
                                    <span>免费免票，进来就得用票</span>
                                </li>
                                <li>
                                    <i>图</i>
                                    <span>免费免票，进来就得用票</span>
                                </li>
                                <li>
                                    <i>图</i>
                                    <span>免费免票，进来就得用票</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="news-right hidden">
                    <!-- 这里先空着，我准备做个组件 -->
                    <DashNewsItem></DashNewsItem>
                    <DashNewsItem></DashNewsItem>
                    <DashNewsItem></DashNewsItem>
                    <DashNewsItem></DashNewsItem>
                </div>
            </div>
        </div>
        <div class="home-container_preview">
            <div class="home-container_preview-content">
                <ModuleName></ModuleName>
                <div class="preview-container" ref='preview'>
                    <div class="container-all preview-hidden">
                        <div class="preview-container_img">
                            <img :src="getImage('pic.jpg')" alt="">
                        </div>
                        <div class="preview-container_content">
                            <h4>汉代画像艺术展</h4>
                            <p>汉代画像石是汉代地下墓室、墓地祠堂、木阙和庙阙等建筑上雕刻画像的建筑构石。汉代人以石为地，以刀代笔...</p>
                            <div class="content-address">
                                <ul>
                                    <li>一楼二号展厅</li>
                                    <li>周二至周日9:00—17:00开馆，16:00停止入馆</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="container-all all-right">
                        <div class="preview-container_img">
                            <img :src="getImage('pic.jpg')" alt="">
                        </div>
                        <div class="preview-container_content">
                            <h4>汉代画像艺术展</h4>
                            <p>汉代画像石是汉代地下墓室、墓地祠堂、木阙和庙阙等建筑上雕刻画像的建筑构石。汉代人以石为地，以刀代笔...</p>
                            <div class="content-address">
                                <ul>
                                    <li>一楼二号展厅</li>
                                    <li>周二至周日9:00—17:00开馆，16:00停止入馆</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-container_area">
            <div class="home-container_area-content">
                <ModuleName :title="'常设展览'"></ModuleName>
                <div class="area-container" ref="area">
                    <img :src="getImage('1.jpg')" alt="">
                    <AreaCard class="top60n"></AreaCard>
                    <AreaCard class="top60p"></AreaCard>
                    <AreaCard></AreaCard>
                    <AreaCard></AreaCard>
                    <AreaCard></AreaCard>
                </div>
            </div>
        </div>
        <div class="home-container_treasure">
            <div class="home-container_treasure-content">
                <ModuleName :title="`镇馆之宝`" style="float: left;"></ModuleName>
                <div class=" treasure-banner">
                    <div ref="treasure" class="box1">
                        <div class="block text-center remove" m="t-4" style="width:100%; float: left;">
                            <el-carousel trigger="click" height="760px" indicator-position="none" arrow="always">
                                <el-carousel-item v-for="item in 4" :key="item">
                                    <div class="treasure-banner_item">
                                        <div class="item-img">
                                            <img :src="getImage('baby.png')" alt="">
                                        </div>
                                        <div class="item-introduce">
                                            <p>上古时代的宝贝</p>
                                        </div>
                                    </div>
                                    <div class="treasure-banner_item">
                                        <div class="item-img">
                                            <img :src="getImage('baby.png')" alt="">
                                        </div>
                                        <div class="item-introduce">
                                            <p>上古时代的宝贝</p>
                                        </div>
                                    </div>
                                    <div class="treasure-banner_item">
                                        <div class="item-introduce">
                                            <p>上古时代的宝贝</p>
                                        </div>
                                        <div class="item-img">
                                            <img :src="getImage('baby.png')" alt="">
                                        </div>
                                    </div>
                                    <div class="treasure-banner_item">
                                        <div class="item-introduce">
                                            <p>上古时代的宝贝</p>
                                        </div>
                                        <div class="item-img">
                                            <img :src="getImage('baby.png')" alt="">
                                        </div>

                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-container_education">
            <div class="home-container_education-content">
                <div class="education-title">
                    <h2>教育</h2>
                    <p>更多内容</p>
                </div>
                <div class="education-module" ref="education">
                    <ul class="education-module_item">
                        <li>
                            <img :src="getImage('education.png')" alt="">
                            <div class="module_item-introduce">
                                <p>知书</p>
                                <p>了解更多</p>
                            </div>
                        </li>
                        <li>
                            <img :src="getImage('education.png')" alt="">
                            <div class="module_item-introduce">
                                <p>知书</p>
                                <p>了解更多</p>
                            </div>
                        </li>
                        <li>
                            <img :src="getImage('education.png')" alt="">
                            <div class="module_item-introduce">
                                <p>知书</p>
                                <p>了解更多</p>
                            </div>
                        </li>
                        <li>
                            <img :src="getImage('education.png')" alt="">
                            <div class="module_item-introduce">
                                <p>知书</p>
                                <p>了解更多</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="home-container_sci">
            <div class="home-container_sci-content" ref="sci">
                <div class="sci-content_article">
                    <div class="article-title">
                        <h2>科研项目</h2>
                        <p>更多内容</p>
                    </div>
                    <div class="article-content">
                        <ul class="article-content_item">
                            <li>
                                <p>苔藓植物对济南市环境质量生物指示的研究</p>
                                <p>2024.1.1</p>
                            </li>
                            <li>
                                <p>苔藓植物对济南市环境质量生物指示的研究</p>
                                <p>2024.1.1</p>
                            </li>
                            <li>
                                <p>苔藓植物对济南市环境质量生物指示的研究</p>
                                <p>2024.1.1</p>
                            </li>
                            <li>
                                <p>苔藓植物对济南市环境质量生物指示的研究</p>
                                <p>2024.1.1</p>
                            </li>
                            <li>
                                <p>苔藓植物对济南市环境质量生物指示的研究</p>
                                <p>2024.1.1</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="sci-content_active">
                    <div class="active-title">
                        <h2>学术活动</h2>
                        <p>更多内容</p>
                    </div>
                    <div class="active-content">
                        <div class="active-content_item">
                            <img :src="getImage('1.jpg')" alt="">
                            <div class="active-content_item-introduce">
                                <h3>文博大讲堂</h3>
                                <p>为大家解读展览北京，讲述文明发展的故事</p>
                            </div>
                        </div>
                        <div class="active-content_item-bottom">
                            <div></div>
                            <div class="active-content_item-introduce">
                                <h3>在线报名</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Footer></Footer>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import { useElementVisibility } from '@vueuse/core'
import { getImage } from '@/utils';
import DashNewsItem from './components/news-com/index.vue'
import ModuleName from './components/global/ModuleName.vue'
import AreaCard from './components/area/AreaCard.vue'
import Footer from '@/components/Footer/index.vue'
// 组件名称定义
defineOptions({
    name: 'MuseumDash'
});
// 轮播图图片列表
const bannerList = ref(['1.jpg', '2.jpg', '3.jpg', '4.jpg']);
// 幻灯片切换后的样式更改
const change = () => {
    nextTick(() => {
        const picItems = document.querySelectorAll('.el-carousel__item');
        picItems.forEach(item => {
            item.style.transform = 'scale(1)';
        });
        setTimeout(() => {
            const isActive = document.querySelector('.el-carousel__item.is-active');
            if (isActive) {
                isActive.style.transform = 'scale(1.08)';
            }
        }, 10);
    });
};
change()
// 使用 MutationObserver 监控并覆盖 translate 样式
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
            mutation.target.style.transform = mutation.target.style.transform.replace(/translateX\([^)]*\)/, '');
        }
    });
});

// 监听页面加载和卸载事件
onMounted(() => {
    const items = document.querySelectorAll('.el-carousel__item');
    items.forEach(item => {
        observer.observe(item, {
            attributes: true,
            attributeFilter: ['style']
        });
    });
});

onBeforeUnmount(() => {
    observer.disconnect();
});


//Module-news 展示特效
const news = ref(null)
const newsIsVisible = useElementVisibility(news)
watch(newsIsVisible, (n) => {
    const arr = Array.from(news.value.children)
    if (n) {
        arr.forEach(item => {
            item.style.transform = `translate(0)`
            item.style.transition = `transform .8s`
        })
    } else {
        arr.forEach(item => {
            item.style = ''
        })
    }
})

//Module-preview
const preview = ref(null)
const previewIsVisible = useElementVisibility(preview)
watch(previewIsVisible, (n) => {
    const arr = Array.from(preview.value.children)
    if (n) {
        arr[0].style.transform = `translateY(0)`
        arr[0].style.transition = `transform 1s`
        arr[1].style.transition = `top 1s`
        arr[1].style.top = '160px'

    } else {
        arr.forEach(item => {
            item.style = ''
        })
    }
})

//Module-Area
const area = ref(null)
const areaIsVisible = useElementVisibility(area)
watch(areaIsVisible, async (n) => {
    const arr = Array.from(area.value.children)
    const delay = (ms) => new Promise(res => setTimeout(res, ms))
    if (n) {
        for (const item of arr) {
            item.style.opacity = '1'
            item.style.transition = 'opacity 1s'
            await delay(500)
        }
    } else {
        arr.forEach(item => {
            item.style.opacity = '0'
        })
    }
})

//Module-treasure
const treasure = ref(null)
const treasureIsVisible = useElementVisibility(treasure)
watch(treasureIsVisible, (n) => {
    if (n) {
        treasure.value.children[0].style.transition = 'transform 1.5s';
        treasure.value.children[0].style.transform = 'translateX(0)';


    } else {
        treasure.value.children[0].style = ''
    }
})

//Module-education
const education = ref(null)
const educationIsVisible = useElementVisibility(education)
watch(educationIsVisible, (n) => {
    if (n) {
        education.value.children[0].style.transition = 'transform 1.5s';
        education.value.children[0].style.transform = 'translateX(0)';


    } else {
        education.value.children[0].style = ''
    }
})

//Module-Sci
const sci = ref(null)
const sciIsVisible = useElementVisibility(sci)
watch(sciIsVisible, (n) => {
    const arr = Array.from(sci.value.children)
    console.log(arr, 'sci')
    if (n) {
        arr.forEach(item => {
            item.style.transition = 'transform 1.5s';
            item.style.transform = 'translateX(0)';
        })
    } else {
        arr.forEach(item => {
            item.style = ''
        })
    }
})
</script>

<style lang="scss" scoped>
/********* public style *********/

:deep(.el-carousel__arrow) {
    background-color: rgba(0, 0, 0, 0.5); // 半透明黑色背景
    border-radius: 50%; // 圆形按钮
    width: 40px;
    height: 40px;
    bottom: 0;
    top: auto;
}

// 定制左侧按钮
:deep(.el-carousel__arrow--left) {
    left: auto;
    right: 50px;
}

// 定制右侧按钮
:deep(.el-carousel__arrow--right) {
    right: 0px;
}

.all-right {
    margin-left: 15px;
    position: absolute;
    top: 900px;
}

.top60p {
    top: -60px;
}

.top60n {
    top: 60px
}

.show {
    transition: transform .3s;
    transform: translate(0);
}

.hidden {
    transform: translateY(900px);
}

.preview-hidden {
    transform: translateY(-900px);
}

/********* module style *********/
.home-container_banner {
    height: 100vh;
    overflow: hidden;
    position: relative;

    .container-pic {
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

.el-carousel__item {
    transition: opacity 0.5s linear, transform 2s ease-in-out !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 1;
}

.el-carousel__item.is-active {
    opacity: 1;
    z-index: 2;
}

.home-container_news {
    padding: 100px 0px;
    height: 100%;
    background-color: rgb(238, 233, 233);
    overflow: hidden;

    .container-news_main {
        margin: 0 auto;
        display: flex;
        max-width: 1719px;
    }

    .news-left {
        display: flex;
        flex-direction: column;
        width: 55%;

        .news-left_header {
            display: flex;
            padding: 30px 40px 40px 40px;
            font-size: 18px;
            color: #333;
            background-color: rgb(233, 233, 197);

            .left_header-introduce {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding-right: 40px;
            }

            .left_header-newsList {
                flex: 3;

                li {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }

        .news-left_footer {
            display: flex;
            height: 490px;
            margin-top: 20px;

            .footer-text {
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 60px;
                width: 50%;
                background-color: rgb(185, 158, 88);
                color: white;

                h3 {
                    font-size: 46px;
                    font-weight: normal;
                }

                .footer-text_content {

                    h3 {
                        font-size: 24px;
                        line-height: 80px;
                    }

                    p {
                        font-size: 14px;
                    }
                }
            }

            .footer-img {
                width: 50%;
                background-color: rgb(68, 55, 37);
                color: white;
            }
        }
    }

    .news-middle {
        width: 27%;
        margin: 0 20px;
        display: flex;
        flex-direction: column;

        .middle-title {
            display: flex;
            justify-content: center;
            padding: 40px 50px;

            .title-introduce {
                margin-left: 30px;

                h2 {

                    font-size: 30px;
                    font-weight: normal;
                }
            }

        }

        .middle-rule {
            padding: 50px;
            height: 100%;
            background-color: rgb(150, 155, 122);
            color: white;

            h3 {
                padding-bottom: 26px;
                font-size: 42px;
            }

            .clock {
                padding-bottom: 20px;
                padding-left: 10px;
                font-size: 42px;

            }

            .rule-time {
                padding-bottom: 35px;
                border-bottom: 1px dashed white;

                p {
                    font-size: 16px;
                }
            }

            .rule-phone {
                padding-top: 20px;
                font-size: 16px;

                li {
                    i {
                        margin-right: 10px;
                    }
                }

                li:nth-of-type(2) {
                    margin: 20px 0;
                }

            }
        }
    }

    .news-right {
        width: 18%;
        border: 1px solid black;
        display: flex;
        flex-direction: column;
    }
}

.home-container_preview {
    padding: 100px 0px;
    background-color: rgb(227, 219, 200);

    .home-container_preview-content {
        height: 800px;
        margin: 0 auto;
        max-width: 1719px;
        display: flex;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
    }

    .preview-container {
        writing-mode: vertical-lr;
        width: 1544px;

        .container-all {
            height: 635px;

            .preview-container_img {
                width: 60%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .preview-container_content {
                padding: 50px 10px 110px 50px;
                background-color: rgb(178, 149, 87);
                color: white;

                h4 {
                    font-size: 22px;
                    font-weight: normal;
                    margin-right: 20px;
                }

                p {
                    font-size: 14px;
                    line-height: 30px;
                }

                .content-address {
                    margin-left: 60px;
                    font-size: 16px;
                    line-height: 40px;
                }
            }
        }
    }


}

.home-container_area {
    padding: 100px 0;
    background-color: rgb(225, 214, 194);

    .home-container_area-content {
        max-width: 1719px;
        margin: 0 auto;
        display: flex;
        height: 680px;

    }


    .area-container {
        display: flex;
        justify-content: space-around;
        width: 1538px;
        margin-left: 100px;


        img {
            width: 880px;
            height: 100%;
        }


    }


}

.home-container_treasure {
    padding: 100px 0;
    background-color: rgb(238, 238, 224);


    .home-container_treasure-content {
        max-width: 1719px;
        overflow: hidden;
        margin: 0 auto;

        .treasure-banner {
            overflow: hidden;
            margin-left: 160px;
            position: relative;

            .box1 {
                position: relative;
                height: 760px;

                .remove {
                    transform: translateX(-2000px);
                }
            }

            .treasure-banner_item {
                display: flex;
                position: absolute;

                .item-img {
                    height: 410px;
                    border: 1px dashed rgb(178, 149, 80);
                    border-radius: 2px;
                    background-color: rgb(246, 246, 232);

                    img {
                        width: 100%;
                    }
                }

                .item-introduce {
                    margin-left: 15px;
                    writing-mode: vertical-rl;
                    font-size: 22px;
                }
            }

            .treasure-banner_item:nth-of-type(1) {
                top: 20%;
            }

            .treasure-banner_item:nth-of-type(2) {
                left: 30%;
                top: 10%;
                z-index: 9;

                .item-img {
                    width: 328px;
                }
            }

            .treasure-banner_item:nth-of-type(3) {
                left: 45%;
                top: 40%;
                text-align: right;

                .item-img {
                    width: 328px;
                }

            }

            .treasure-banner_item:nth-of-type(4) {
                right: 0;
                top: 20%;
            }
        }
    }
}

.home-container_education {
    padding: 100px 0;
    background-color: rgb(250, 250, 250);

    .home-container_education-content {
        margin: 0 auto;
        max-width: 1716px;
        overflow: hidden;
        height: 796px;

        .education-title {
            display: flex;
            justify-content: space-between;
            width: 400px;
            margin-left: 26%;
            padding-bottom: 20px;

            h2 {
                font-size: 44px;
                font-weight: normal;
            }

            p {
                width: 100px;
                font-size: 16px;
                height: 70px;
                line-height: 70px;
                background: rgb(178, 149, 80);
                text-align: center;
                color: white;
            }
        }

        .education-module_item {
            display: flex;
            justify-content: space-between;
            transform: translateY(1000px);
            height: 100%;

            li {
                position: relative;

                .module_item-introduce {
                    height: 80%;
                    display: flex;
                    justify-content: space-between;
                    writing-mode: vertical-lr;
                    color: white;
                    position: absolute;
                    top: 15%;
                    right: 10%;
                    font-size: 16px;
                    line-height: 57px;

                    p:nth-of-type(1) {
                        font-size: 36px;
                    }
                }
            }

            li:nth-of-type(2) {
                top: 50px;
            }

            li:nth-of-type(3) {
                top: -100px;
            }

            li:nth-of-type(4) {
                top: 40px;
            }
        }
    }
}

.home-container_sci {
    padding: 100px 0;
    background-color: rgb(230, 233, 205);

    .home-container_sci-content {
        margin: 0 auto;
        max-width: 1716px;
        display: flex;
        justify-content: space-between;
        overflow: hidden;

        .sci-content_article {

            width: 54%;
            transform: translate(-2000px);

            .article-title {
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding-bottom: 50px;

                h2 {
                    font-size: 44px;
                    font-weight: normal;
                }

                p {
                    font-size: 16px;
                    line-height: 70px;
                }
            }

            .article-content {

                .article-content_item {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    li {
                        box-sizing: border-box;
                        margin-bottom: 20px;
                        padding: 50px 40px;
                        width: 300px;
                        height: 314px;
                        background-color: rgb(184, 154, 86);
                        color: white;
                        font-size: 16px;
                    }

                    li:nth-of-type(1) {
                        width: 613px;
                    }
                }
            }

        }

        .sci-content_active {
            width: 45%;
            transform: translate(2000px);

            .active-title {
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding-bottom: 50px;

                h2 {
                    font-size: 44px;
                    font-weight: normal;
                }

                p {
                    font-size: 16px;
                    line-height: 70px;
                }

            }

            .active-content_item {
                display: flex;
                width: 100%;
                height: 316px;

                img {
                    width: 50%;
                }

                .active-content_item-introduce {
                    width: 50%;
                    padding: 50px 40px;
                    background-color: rgb(161, 172, 134);

                    h3 {
                        font-size: 40px;
                        color: white;
                        font-weight: normal;
                    }

                    p {
                        font-size: 14px;
                        color: white;
                    }
                }
            }

            .active-content_item-bottom {
                display: flex;
                width: 100%;
                height: 332px;
                box-sizing: border-box;

                div:nth-of-type(1) {
                    width: 85%;
                    border: 1px dashed rgb(173, 149, 90);
                    background-color: rgb(226, 219, 202);
                }

                .active-content_item-introduce {
                    background-color: rgb(173, 100, 32);
                    width: 15%;
                    line-height: 117px;

                    h3 {
                        height: 100%;
                        color: white;
                        font-size: 24px;
                        font-weight: normal;
                        writing-mode: vertical-lr;
                        text-align: center;
                    }
                }

            }
        }
    }
}
</style>